<template>
  <div id="login">
    <!--登录头部区-->
    <div class="l-header">
      <div class="l-img">
        <img src="../../../static/images/user.jpg" />
      </div>
      <div class="r-content">
        <h5>彩问卷</h5>
        <span>不仅仅是问卷</span>
      </div>
    </div>
    <!--登录主体区-->
    <div class="l-body">
      <div class="b-header">请使用OA账户登录</div>
      <div class="b-content">
        <form>
          <div class="con-input">
            <span>账号</span><input type="text" v-model="userNumber" /><br />
            <span>密码</span><input type="password" v-model="userPassword" /><br />
          </div>
          <input type="button" @click="submit()" :value="loginName" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'login',
    data() {
      return {
      	loginName: "登录",
        userNumber: "",
        userPassword: ""
      }
    },
    methods: {
      submit: function () {
        let self = this;        
        if (this.userNumber === '') {
          alert('请填写用户名');
        } else if (this.userPassword === '') {
          alert('请填写用户密码');
        } else {
          axios({
            method: 'post',
            url: '/investigator/go/index',
            //将被发送的自定义请求头
            headers: {
              'Content-Type': 'application/json'
            },
            //作为请求主体被发送的数据
            data: {
              userNumber: this.userNumber,
              userPassword: this.userPassword
            }
          }).then(function (res) {
            console.log("访问接口成功");
            if (res.data.code == 0) {
              console.log(res.data.data);
              alert("登录成功");
              sessionStorage.setItem("user", JSON.stringify(res.data.data));
              self.$router.replace({
                path: '/createques'
              });
            } else {
              alert(res.data.msg);
            }
          }).catch(function (error) {         	
            console.log(self.userNumber + ":" + self.userPassword);
            if (self.userNumber == "test" && self.userPassword === "123456") {
            	self.loginName = "登录中....";
              alert("进入测试");
              sessionStorage.setItem("user", "测试");
              self.$router.replace({
                path: '/createques'
              });
            } else {
              alert("网络错误")
            }
          })
        }
      }
    }

  }
</script>

<style scoped="scoped">
  #login {
    background: linear-gradient(#1580B6, #8FBED8);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 960px;
  }
  .l-header {
    height: 100px;
    width: 300px;
    margin: 40px auto;
    display: flex;
    align-items: center;
  }
  .l-img img {
    float: left;
    height: 85px;
    width: 85px;
    border-radius: 50%;
    background-color: #fff;
  }
  .r-content {
    float: left;
    width: 150px;
    font-family: "微软雅黑";
    margin-left: 2px;
    text-align: center;
    margin-top: -22px;
  }
  .r-content h5 {
    font-family: "微软雅黑";
    font-size: 40px;
    color: #fff;
    letter-spacing: 6px;
    font-weight: 400;
    margin: 0;
  }
  .r-content span {
    font-family: "微软雅黑";
    font-size: 18px;
    color: #ffff;
  }
  .l-body {
    position: absolute;
    left: 50%;
    top: 30%;
    height: 300px;
    width: 500px;
    transform: translateX(-50%);
    background-color: rgba(255,255,255,.3);
    border-radius: 5px;
    box-shadow: 1px 1px 8px #000;
  }
  .b-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
    font-family: "微软雅黑";
    color: rgba(0,0,0,.7);
    letter-spacing: 2px;
  }
  .b-content {
    height: 200px;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .b-content span {
  	font-family: "微软雅黑";
    margin-right: 8px;
  }
  .b-content .con-input {
    height: 83px;
    width: 298px;   
  }
  .b-content input {
    height: 30px;
    width: 240px;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #888;
    background-color: #fff;
    padding: 2px 8px;
    border-radius: 5px;
  }
  .b-content input:focus{
  	background-color: #fff;
  }
  .b-content input[type="button"] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    box-sizing: border-box;
    width: 200px;
    margin-left: -100px;
    height: 40px;
    color: #fff;
    background-color: rgb(83, 160, 199);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: "微软雅黑";
  }
</style>